/**
 * @file srceen_menu.cx
 * @author cangyu (sky.kirto@qq.com)
 * @brief
 * @version 0.1
 * @date 2024-09-26
 *
 * @copyright Copyright (cx) 2024, CorAL. All rights reserved.
 *
 */

/* ==================== [Includes] ========================================== */

#include "srceen_menu.h"

#if LV_CONF_INCLUDE_SIMPLE
    #include "lvgl.h"
#else
    #include "lvgl/lvgl.h"
#endif

#include "../font/fonts.h"
#include "../img/images.h"

/* ==================== [Defines] =========================================== */

/* ==================== [Typedefs] ========================================== */

typedef struct _objects_t {
    lv_obj_t *root;
    lv_obj_t *tabview;
} objects_t;

/* ==================== [Static Prototypes] ================================= */

static void create_screen_menu(void);
static void lv_timer_cb(lv_timer_t *t);

/* ==================== [Static Variables] ================================== */

static objects_t objects = {0};
static uint32_t s_index = 0;

/* ==================== [Macros] ============================================ */

/* ==================== [Global Functions] ================================== */

void create_screens(void)
{
    lv_disp_t *dispp = lv_disp_get_default();
    lv_theme_t *theme = lv_theme_default_init(dispp, lv_palette_main(LV_PALETTE_BLUE), lv_palette_main(LV_PALETTE_RED),
                        false, LV_FONT_DEFAULT);
    lv_disp_set_theme(dispp, theme);

    create_screen_menu();
}

void load_screen(void)
{
    lv_scr_load(objects.root);
}

void menu_next(void)
{
    uint32_t count = lv_tabview_get_tab_count(objects.tabview);
    s_index--;
    s_index = (s_index + count) % count;
    lv_tabview_set_active(objects.tabview, s_index, LV_ANIM_OFF);
}

void menu_prev(void)
{
    uint32_t count = lv_tabview_get_tab_count(objects.tabview);
    s_index++;
    s_index = s_index % count;
    lv_tabview_set_active(objects.tabview, s_index, LV_ANIM_OFF);
}

void menu_select(void)
{

}

/* ==================== [Static Functions] ================================== */

static void create_screen_menu(void)
{
    lv_obj_t *obj = lv_obj_create(0);
    lv_obj_set_pos(obj, 0, 0);
    lv_obj_set_size(obj, 320, 240);
    lv_obj_clear_flag(obj, LV_OBJ_FLAG_SCROLLABLE);
    lv_obj_set_style_text_color(obj, lv_color_hex(0xffd52929), LV_PART_MAIN | LV_STATE_DEFAULT);
    lv_obj_set_style_text_opa(obj, 255, LV_PART_MAIN | LV_STATE_DEFAULT);
    objects.root = obj;

    // 设置 tabview
    lv_obj_t *tabview_obj = lv_tabview_create(obj);
    lv_tabview_set_tab_bar_position(tabview_obj, LV_DIR_LEFT);
    lv_tabview_set_tab_bar_size(tabview_obj, 80);
    lv_obj_set_pos(tabview_obj, 0, 0);
    lv_obj_set_size(tabview_obj, 320, 240);
    lv_obj_set_style_text_font(tabview_obj, &ui_font_alibaba_pu_hui_20, LV_PART_MAIN | LV_STATE_DEFAULT);
    objects.tabview = tabview_obj;


    // 设置 tabview 的 tabbar
    lv_obj_t *tabbar_obj = lv_tabview_get_tab_bar(tabview_obj);
    lv_obj_set_style_pad_left(tabbar_obj, 0, LV_PART_MAIN | LV_STATE_DEFAULT);
    lv_obj_set_style_pad_top(tabbar_obj, 0, LV_PART_MAIN | LV_STATE_DEFAULT);
    lv_obj_set_style_pad_right(tabbar_obj, 0, LV_PART_MAIN | LV_STATE_DEFAULT);
    lv_obj_set_style_pad_bottom(tabbar_obj, 0, LV_PART_MAIN | LV_STATE_DEFAULT);
    lv_obj_set_style_border_width(tabbar_obj, 0, LV_PART_MAIN | LV_STATE_DEFAULT);
    lv_obj_set_style_radius(tabbar_obj, 0, LV_PART_MAIN | LV_STATE_DEFAULT);
    lv_obj_set_style_bg_color(tabbar_obj, lv_color_hex(0xff747342), LV_PART_MAIN | LV_STATE_DEFAULT);
    lv_obj_set_style_bg_opa(tabbar_obj, 255, LV_PART_MAIN | LV_STATE_DEFAULT);

    // 设置 tabview 的 content
    lv_obj_t *content_obj = lv_tabview_get_content(tabview_obj);
    lv_obj_set_style_pad_left(content_obj, 0, LV_PART_MAIN | LV_STATE_DEFAULT);
    lv_obj_set_style_pad_top(content_obj, 0, LV_PART_MAIN | LV_STATE_DEFAULT);
    lv_obj_set_style_pad_right(content_obj, 0, LV_PART_MAIN | LV_STATE_DEFAULT);
    lv_obj_set_style_pad_bottom(content_obj, 0, LV_PART_MAIN | LV_STATE_DEFAULT);
    lv_obj_set_style_bg_opa(content_obj, 0, LV_PART_MAIN | LV_STATE_DEFAULT);
    lv_obj_set_style_border_width(content_obj, 0, LV_PART_MAIN | LV_STATE_DEFAULT);
    lv_obj_set_style_radius(content_obj, 0, LV_PART_MAIN | LV_STATE_DEFAULT);

    // 设置 tabview 的游戏 tab
    lv_obj_t *game_tab_obj = lv_tabview_add_tab(tabview_obj, "游戏");
    lv_obj_clear_flag(game_tab_obj, LV_OBJ_FLAG_SCROLLABLE);
    lv_obj_set_style_border_width(game_tab_obj, 0, LV_PART_MAIN | LV_STATE_DEFAULT);
    lv_obj_set_style_bg_color(game_tab_obj, lv_color_hex(0xff3d3131), LV_PART_MAIN | LV_STATE_DEFAULT);
    lv_obj_set_style_bg_opa(game_tab_obj, 255, LV_PART_MAIN | LV_STATE_DEFAULT);

    // 游戏菜单容器
    lv_obj_t *game_container = lv_obj_create(game_tab_obj);
    lv_obj_set_pos(game_container, -13, -13);
    lv_obj_set_size(game_container, 240, 240);
    lv_obj_set_style_pad_left(game_container, 0, LV_PART_MAIN | LV_STATE_DEFAULT);
    lv_obj_set_style_pad_top(game_container, 0, LV_PART_MAIN | LV_STATE_DEFAULT);
    lv_obj_set_style_pad_right(game_container, 0, LV_PART_MAIN | LV_STATE_DEFAULT);
    lv_obj_set_style_pad_bottom(game_container, 0, LV_PART_MAIN | LV_STATE_DEFAULT);
    lv_obj_set_style_bg_opa(game_container, 0, LV_PART_MAIN | LV_STATE_DEFAULT);
    lv_obj_set_style_border_width(game_container, 0, LV_PART_MAIN | LV_STATE_DEFAULT);
    lv_obj_set_style_radius(game_container, 0, LV_PART_MAIN | LV_STATE_DEFAULT);
    lv_obj_clear_flag(game_container, LV_OBJ_FLAG_SCROLLABLE);

    // 外部圆
    lv_obj_t *game_out_panel = lv_obj_create(game_container);
    lv_obj_set_pos(game_out_panel, 0, 0);
    lv_obj_set_size(game_out_panel, 480, 480);
    lv_obj_set_style_radius(game_out_panel, 240, LV_PART_MAIN | LV_STATE_DEFAULT);
    lv_obj_set_style_clip_corner(game_out_panel, true, LV_PART_MAIN | LV_STATE_DEFAULT);
    lv_obj_set_style_bg_color(game_out_panel, lv_color_hex(0xff494647), LV_PART_MAIN | LV_STATE_DEFAULT);

    // 内部圆
    lv_obj_t *game_inner_panel = lv_obj_create(game_container);
    lv_obj_set_pos(game_inner_panel, 121, 119);
    lv_obj_set_size(game_inner_panel, 240, 240);
    lv_obj_set_style_radius(game_inner_panel, 240, LV_PART_MAIN | LV_STATE_DEFAULT);
    lv_obj_set_style_clip_corner(game_inner_panel, true, LV_PART_MAIN | LV_STATE_DEFAULT);
    lv_obj_set_style_bg_color(game_inner_panel, lv_color_hex(0xffd3bdaf), LV_PART_MAIN | LV_STATE_DEFAULT);

    // 小圆文字
    lv_obj_t *game_inner_text = lv_label_create(game_inner_panel);
    lv_obj_set_pos(game_inner_text, 48, 53);
    lv_obj_set_size(game_inner_text, LV_SIZE_CONTENT, LV_SIZE_CONTENT);
    lv_label_set_text(game_inner_text, "猫狗\n大战");
    lv_obj_set_style_text_font(game_inner_text, &ui_font_alibaba_pu_hui_18, LV_PART_MAIN | LV_STATE_DEFAULT);

    // 选项一
    lv_obj_t *game_option_1 = lv_obj_create(game_container);
    lv_obj_set_pos(game_option_1, 164, 17);
    lv_obj_set_size(game_option_1, 100, 100);
    lv_obj_set_style_radius(game_option_1, 240, LV_PART_MAIN | LV_STATE_DEFAULT);
    lv_obj_set_style_clip_corner(game_option_1, false, LV_PART_MAIN | LV_STATE_DEFAULT);
    lv_obj_set_style_bg_color(game_option_1, lv_color_hex(0xff896334), LV_PART_MAIN | LV_STATE_DEFAULT);
    lv_obj_set_style_border_color(game_option_1, lv_color_hex(0xff58d271), LV_PART_MAIN | LV_STATE_FOCUSED);

    lv_obj_t *game_option_1_img = lv_img_create(game_option_1);
    lv_obj_set_pos(game_option_1_img, 0, 0);
    lv_obj_set_size(game_option_1_img, LV_SIZE_CONTENT, LV_SIZE_CONTENT);
    lv_img_set_src(game_option_1_img, &ping_pong);

    // 选项二
    lv_obj_t *game_option_2 = lv_obj_create(game_container);
    lv_obj_set_pos(game_option_2, 14, 170);
    lv_obj_set_size(game_option_2, 100, 100);
    lv_obj_set_style_radius(game_option_2, 240, LV_PART_MAIN | LV_STATE_DEFAULT);
    lv_obj_set_style_clip_corner(game_option_2, false, LV_PART_MAIN | LV_STATE_DEFAULT);
    lv_obj_set_style_bg_color(game_option_2, lv_color_hex(0xff896334), LV_PART_MAIN | LV_STATE_DEFAULT);
    lv_obj_set_style_border_color(game_option_2, lv_color_hex(0xff58d271), LV_PART_MAIN | LV_STATE_FOCUSED);

    lv_obj_t *game_option_2_img = lv_img_create(game_option_2);
    lv_obj_set_pos(game_option_2_img, 0, 0);
    lv_obj_set_size(game_option_2_img, LV_SIZE_CONTENT, LV_SIZE_CONTENT);
    lv_img_set_src(game_option_2_img, &xo);

    // 选项三
    lv_obj_t *game_option_3 = lv_obj_create(game_container);
    lv_obj_set_pos(game_option_3, 64, 70);
    lv_obj_set_size(game_option_3, 100, 100);
    lv_obj_set_style_radius(game_option_3, 240, LV_PART_MAIN | LV_STATE_DEFAULT);
    lv_obj_set_style_clip_corner(game_option_3, false, LV_PART_MAIN | LV_STATE_DEFAULT);
    lv_obj_set_style_bg_color(game_option_3, lv_color_hex(0xff896334), LV_PART_MAIN | LV_STATE_DEFAULT);
    lv_obj_set_style_bg_image_recolor(game_option_3, lv_color_hex(0xff000000), LV_PART_MAIN | LV_STATE_DEFAULT);
    lv_obj_set_style_border_color(game_option_3, lv_color_hex(0xff58d271), LV_PART_MAIN | LV_STATE_FOCUSED);

    lv_obj_t *game_option_3_img = lv_img_create(game_option_3);
    lv_obj_set_pos(game_option_3_img, 0, 0);
    lv_obj_set_size(game_option_3_img, LV_SIZE_CONTENT, LV_SIZE_CONTENT);
    lv_img_set_src(game_option_3_img, &cat_dog);

    // name 容器
    lv_obj_t *game_name_obj = lv_obj_create(game_container);
    lv_obj_set_pos(game_name_obj, 0, 0);
    lv_obj_set_size(game_name_obj, LV_SIZE_CONTENT, LV_SIZE_CONTENT);
    lv_obj_set_style_radius(game_name_obj, 255, LV_PART_MAIN | LV_STATE_DEFAULT);
    lv_obj_set_style_clip_corner(game_name_obj, true, LV_PART_MAIN | LV_STATE_DEFAULT);
    lv_obj_set_style_opa(game_name_obj, 255, LV_PART_MAIN | LV_STATE_DEFAULT);
    lv_obj_set_style_pad_top(game_name_obj, 2, LV_PART_MAIN | LV_STATE_DEFAULT);
    lv_obj_set_style_pad_bottom(game_name_obj, 2, LV_PART_MAIN | LV_STATE_DEFAULT);
    lv_obj_set_style_pad_left(game_name_obj, 12, LV_PART_MAIN | LV_STATE_DEFAULT);
    lv_obj_set_style_pad_right(game_name_obj, 12, LV_PART_MAIN | LV_STATE_DEFAULT);
    lv_obj_set_style_text_font(game_name_obj, &lv_font_montserrat_16, LV_PART_MAIN | LV_STATE_DEFAULT);
    lv_obj_set_style_bg_color(game_name_obj, lv_color_hex(0xff7d2b2b), LV_PART_MAIN | LV_STATE_DEFAULT);
    lv_obj_set_style_bg_opa(game_name_obj, 255, LV_PART_MAIN | LV_STATE_DEFAULT);

    lv_obj_t *game_name_label = lv_label_create(game_name_obj);
    lv_obj_set_pos(game_name_label, 0, 0);
    lv_obj_set_size(game_name_label, LV_SIZE_CONTENT, LV_SIZE_CONTENT);
    lv_label_set_text(game_name_label, "GAME");

    // 设置 tabview 的工具 tab
    lv_obj_t *tool_tab_obj = lv_tabview_add_tab(tabview_obj, "工具");
    lv_obj_clear_flag(tool_tab_obj, LV_OBJ_FLAG_SCROLLABLE);
    lv_obj_set_style_bg_color(tool_tab_obj, lv_color_hex(0xff3d3131), LV_PART_MAIN | LV_STATE_DEFAULT);
    lv_obj_set_style_bg_opa(tool_tab_obj, 255, LV_PART_MAIN | LV_STATE_DEFAULT);

    // 工具菜单容器
    lv_obj_t *tool_container = lv_obj_create(tool_tab_obj);
    lv_obj_set_pos(tool_container, -13, -13);
    lv_obj_set_size(tool_container, 240, 240);
    lv_obj_set_style_pad_left(tool_container, 0, LV_PART_MAIN | LV_STATE_DEFAULT);
    lv_obj_set_style_pad_top(tool_container, 0, LV_PART_MAIN | LV_STATE_DEFAULT);
    lv_obj_set_style_pad_right(tool_container, 0, LV_PART_MAIN | LV_STATE_DEFAULT);
    lv_obj_set_style_pad_bottom(tool_container, 0, LV_PART_MAIN | LV_STATE_DEFAULT);
    lv_obj_set_style_bg_opa(tool_container, 0, LV_PART_MAIN | LV_STATE_DEFAULT);
    lv_obj_set_style_border_width(tool_container, 0, LV_PART_MAIN | LV_STATE_DEFAULT);
    lv_obj_set_style_radius(tool_container, 0, LV_PART_MAIN | LV_STATE_DEFAULT);
    lv_obj_clear_flag(tool_container, LV_OBJ_FLAG_SCROLLABLE);

    lv_obj_t *tool_out_panel = lv_obj_create(tool_container);
    lv_obj_set_pos(tool_out_panel, 0, 0);
    lv_obj_set_size(tool_out_panel, 480, 480);
    lv_obj_set_style_radius(tool_out_panel, 240, LV_PART_MAIN | LV_STATE_DEFAULT);
    lv_obj_set_style_clip_corner(tool_out_panel, true, LV_PART_MAIN | LV_STATE_DEFAULT);
    lv_obj_set_style_bg_color(tool_out_panel, lv_color_hex(0xff494647), LV_PART_MAIN | LV_STATE_DEFAULT);

    lv_obj_t *tool_inner_panel = lv_obj_create(tool_container);
    lv_obj_set_pos(tool_inner_panel, 121, 119);
    lv_obj_set_size(tool_inner_panel, 240, 240);
    lv_obj_set_style_radius(tool_inner_panel, 240, LV_PART_MAIN | LV_STATE_DEFAULT);
    lv_obj_set_style_clip_corner(tool_inner_panel, true, LV_PART_MAIN | LV_STATE_DEFAULT);
    lv_obj_set_style_bg_color(tool_inner_panel, lv_color_hex(0xffd3bdaf), LV_PART_MAIN | LV_STATE_DEFAULT);

    lv_obj_t *tool_inner_text = lv_label_create(tool_inner_panel);
    lv_obj_set_pos(tool_inner_text, 48, 53);
    lv_obj_set_size(tool_inner_text, LV_SIZE_CONTENT, LV_SIZE_CONTENT);
    lv_label_set_text(tool_inner_text, "串口\n工具");
    lv_obj_set_style_text_font(tool_inner_text, &ui_font_alibaba_pu_hui_18, LV_PART_MAIN | LV_STATE_DEFAULT);

    lv_obj_t *tool_option_1 = lv_obj_create(tool_container);
    lv_obj_set_pos(tool_option_1, 164, 17);
    lv_obj_set_size(tool_option_1, 100, 100);
    lv_obj_set_style_radius(tool_option_1, 240, LV_PART_MAIN | LV_STATE_DEFAULT);
    lv_obj_set_style_clip_corner(tool_option_1, false, LV_PART_MAIN | LV_STATE_DEFAULT);
    lv_obj_set_style_bg_color(tool_option_1, lv_color_hex(0xff896334), LV_PART_MAIN | LV_STATE_DEFAULT);
    lv_obj_set_style_border_color(tool_option_1, lv_color_hex(0xff58d271), LV_PART_MAIN | LV_STATE_FOCUSED);

    lv_obj_t *tool_option_1_img = lv_img_create(tool_option_1);
    lv_obj_set_pos(tool_option_1_img, 0, 0);
    lv_obj_set_size(tool_option_1_img, LV_SIZE_CONTENT, LV_SIZE_CONTENT);
    lv_img_set_src(tool_option_1_img, &i2c);

    lv_obj_t *tool_option_2 = lv_obj_create(tool_container);
    lv_obj_set_pos(tool_option_2, 14, 170);
    lv_obj_set_size(tool_option_2, 100, 100);
    lv_obj_set_style_radius(tool_option_2, 240, LV_PART_MAIN | LV_STATE_DEFAULT);
    lv_obj_set_style_clip_corner(tool_option_2, false, LV_PART_MAIN | LV_STATE_DEFAULT);
    lv_obj_set_style_bg_color(tool_option_2, lv_color_hex(0xff896334), LV_PART_MAIN | LV_STATE_DEFAULT);
    lv_obj_set_style_border_color(tool_option_2, lv_color_hex(0xff58d271), LV_PART_MAIN | LV_STATE_FOCUSED);

    lv_obj_t *tool_option_2_img = lv_img_create(tool_option_2);
    lv_obj_set_pos(tool_option_2_img, 0, 0);
    lv_obj_set_size(tool_option_2_img, LV_SIZE_CONTENT, LV_SIZE_CONTENT);
    lv_img_set_src(tool_option_2_img, &oscilloscope);

    lv_obj_t *tool_option_3 = lv_obj_create(tool_container);
    lv_obj_set_pos(tool_option_3, 64, 70);
    lv_obj_set_size(tool_option_3, 100, 100);
    lv_obj_set_style_radius(tool_option_3, 240, LV_PART_MAIN | LV_STATE_DEFAULT);
    lv_obj_set_style_clip_corner(tool_option_3, false, LV_PART_MAIN | LV_STATE_DEFAULT);
    lv_obj_set_style_bg_color(tool_option_3, lv_color_hex(0xff896334), LV_PART_MAIN | LV_STATE_DEFAULT);
    lv_obj_set_style_bg_image_recolor(tool_option_3, lv_color_hex(0xff000000), LV_PART_MAIN | LV_STATE_DEFAULT);
    lv_obj_set_style_border_color(tool_option_3, lv_color_hex(0xff58d271), LV_PART_MAIN | LV_STATE_FOCUSED);

    lv_obj_t *tool_option_3_img = lv_img_create(tool_option_3);
    lv_obj_set_pos(tool_option_3_img, 0, 0);
    lv_obj_set_size(tool_option_3_img, LV_SIZE_CONTENT, LV_SIZE_CONTENT);
    lv_img_set_src(tool_option_3_img, &monitor);

    lv_obj_t *tool_name_obj = lv_obj_create(tool_container);
    lv_obj_set_pos(tool_name_obj, 0, 0);
    lv_obj_set_size(tool_name_obj, LV_SIZE_CONTENT, LV_SIZE_CONTENT);
    lv_obj_set_style_radius(tool_name_obj, 255, LV_PART_MAIN | LV_STATE_DEFAULT);
    lv_obj_set_style_clip_corner(tool_name_obj, true, LV_PART_MAIN | LV_STATE_DEFAULT);
    lv_obj_set_style_opa(tool_name_obj, 255, LV_PART_MAIN | LV_STATE_DEFAULT);
    lv_obj_set_style_pad_top(tool_name_obj, 2, LV_PART_MAIN | LV_STATE_DEFAULT);
    lv_obj_set_style_pad_bottom(tool_name_obj, 2, LV_PART_MAIN | LV_STATE_DEFAULT);
    lv_obj_set_style_pad_left(tool_name_obj, 12, LV_PART_MAIN | LV_STATE_DEFAULT);
    lv_obj_set_style_pad_right(tool_name_obj, 12, LV_PART_MAIN | LV_STATE_DEFAULT);
    lv_obj_set_style_text_font(tool_name_obj, &lv_font_montserrat_16, LV_PART_MAIN | LV_STATE_DEFAULT);
    lv_obj_set_style_bg_color(tool_name_obj, lv_color_hex(0xff7d2b2b), LV_PART_MAIN | LV_STATE_DEFAULT);
    lv_obj_set_style_bg_opa(tool_name_obj, 255, LV_PART_MAIN | LV_STATE_DEFAULT);

    lv_obj_t *tool_name_label = lv_label_create(tool_name_obj);
    lv_obj_set_pos(tool_name_label, 0, 0);
    lv_obj_set_size(tool_name_label, LV_SIZE_CONTENT, LV_SIZE_CONTENT);
    lv_label_set_text(tool_name_label, "TOOL");

    // 设置 tabview 的连接 tab
    lv_obj_t *connect_tab_obj = lv_tabview_add_tab(tabview_obj, "连接");
    lv_obj_clear_flag(connect_tab_obj, LV_OBJ_FLAG_SCROLLABLE);
    lv_obj_set_style_bg_color(connect_tab_obj, lv_color_hex(0xff3d3131), LV_PART_MAIN | LV_STATE_DEFAULT);
    lv_obj_set_style_bg_opa(connect_tab_obj, 255, LV_PART_MAIN | LV_STATE_DEFAULT);

    // 连接菜单容器
    lv_obj_t *connect_container = lv_obj_create(connect_tab_obj);
    lv_obj_set_pos(connect_container, -13, -13);
    lv_obj_set_size(connect_container, 240, 240);
    lv_obj_set_style_pad_left(connect_container, 0, LV_PART_MAIN | LV_STATE_DEFAULT);
    lv_obj_set_style_pad_top(connect_container, 0, LV_PART_MAIN | LV_STATE_DEFAULT);
    lv_obj_set_style_pad_right(connect_container, 0, LV_PART_MAIN | LV_STATE_DEFAULT);
    lv_obj_set_style_pad_bottom(connect_container, 0, LV_PART_MAIN | LV_STATE_DEFAULT);
    lv_obj_set_style_bg_opa(connect_container, 0, LV_PART_MAIN | LV_STATE_DEFAULT);
    lv_obj_set_style_border_width(connect_container, 0, LV_PART_MAIN | LV_STATE_DEFAULT);
    lv_obj_set_style_radius(connect_container, 0, LV_PART_MAIN | LV_STATE_DEFAULT);
    lv_obj_clear_flag(connect_container, LV_OBJ_FLAG_SCROLLABLE);

    lv_obj_t *connect_out_panel = lv_obj_create(connect_container);
    lv_obj_set_pos(connect_out_panel, 0, 0);
    lv_obj_set_size(connect_out_panel, 480, 480);
    lv_obj_set_style_radius(connect_out_panel, 240, LV_PART_MAIN | LV_STATE_DEFAULT);
    lv_obj_set_style_clip_corner(connect_out_panel, true, LV_PART_MAIN | LV_STATE_DEFAULT);
    lv_obj_set_style_bg_color(connect_out_panel, lv_color_hex(0xff494647), LV_PART_MAIN | LV_STATE_DEFAULT);

    lv_obj_t *connect_inner_panel = lv_obj_create(connect_container);
    lv_obj_set_pos(connect_inner_panel, 121, 119);
    lv_obj_set_size(connect_inner_panel, 240, 240);
    lv_obj_set_style_radius(connect_inner_panel, 240, LV_PART_MAIN | LV_STATE_DEFAULT);
    lv_obj_set_style_clip_corner(connect_inner_panel, true, LV_PART_MAIN | LV_STATE_DEFAULT);
    lv_obj_set_style_bg_color(connect_inner_panel, lv_color_hex(0xffd3bdaf), LV_PART_MAIN | LV_STATE_DEFAULT);

    lv_obj_t *connect_inner_text = lv_label_create(connect_inner_panel);
    lv_obj_set_pos(connect_inner_text, 48, 53);
    lv_obj_set_size(connect_inner_text, LV_SIZE_CONTENT, LV_SIZE_CONTENT);
    lv_label_set_text(connect_inner_text, "星闪\n连接");
    lv_obj_set_style_text_font(connect_inner_text, &ui_font_alibaba_pu_hui_18, LV_PART_MAIN | LV_STATE_DEFAULT);

    lv_obj_t *connect_option_1 = lv_obj_create(connect_container);
    lv_obj_set_pos(connect_option_1, 164, 17);
    lv_obj_set_size(connect_option_1, 100, 100);
    lv_obj_set_style_radius(connect_option_1, 240, LV_PART_MAIN | LV_STATE_DEFAULT);
    lv_obj_set_style_clip_corner(connect_option_1, false, LV_PART_MAIN | LV_STATE_DEFAULT);
    lv_obj_set_style_bg_color(connect_option_1, lv_color_hex(0xff896334), LV_PART_MAIN | LV_STATE_DEFAULT);
    lv_obj_set_style_border_color(connect_option_1, lv_color_hex(0xff58d271), LV_PART_MAIN | LV_STATE_FOCUSED);

    lv_obj_t *connect_option_1_img = lv_img_create(connect_option_1);
    lv_obj_set_pos(connect_option_1_img, 0, 0);
    lv_obj_set_size(connect_option_1_img, LV_SIZE_CONTENT, LV_SIZE_CONTENT);
    lv_img_set_src(connect_option_1_img, &wifi);

    lv_obj_t *connect_option_2 = lv_obj_create(connect_container);
    lv_obj_set_pos(connect_option_2, 14, 170);
    lv_obj_set_size(connect_option_2, 100, 100);
    lv_obj_set_style_radius(connect_option_2, 240, LV_PART_MAIN | LV_STATE_DEFAULT);
    lv_obj_set_style_clip_corner(connect_option_2, false, LV_PART_MAIN | LV_STATE_DEFAULT);
    lv_obj_set_style_bg_color(connect_option_2, lv_color_hex(0xff896334), LV_PART_MAIN | LV_STATE_DEFAULT);
    lv_obj_set_style_border_color(connect_option_2, lv_color_hex(0xff58d271), LV_PART_MAIN | LV_STATE_FOCUSED);

    lv_obj_t *connect_option_2_img = lv_img_create(connect_option_2);
    lv_obj_set_pos(connect_option_2_img, 0, 0);
    lv_obj_set_size(connect_option_2_img, LV_SIZE_CONTENT, LV_SIZE_CONTENT);
    lv_img_set_src(connect_option_2_img, &bluetooth);

    lv_obj_t *connect_option_3 = lv_obj_create(connect_container);
    lv_obj_set_pos(connect_option_3, 64, 70);
    lv_obj_set_size(connect_option_3, 100, 100);
    lv_obj_set_style_radius(connect_option_3, 240, LV_PART_MAIN | LV_STATE_DEFAULT);
    lv_obj_set_style_clip_corner(connect_option_3, false, LV_PART_MAIN | LV_STATE_DEFAULT);
    lv_obj_set_style_bg_color(connect_option_3, lv_color_hex(0xff896334), LV_PART_MAIN | LV_STATE_DEFAULT);
    lv_obj_set_style_bg_image_recolor(connect_option_3, lv_color_hex(0xff000000), LV_PART_MAIN | LV_STATE_DEFAULT);
    lv_obj_set_style_border_color(connect_option_3, lv_color_hex(0xff58d271), LV_PART_MAIN | LV_STATE_FOCUSED);

    lv_obj_t *connect_option_3_img = lv_img_create(connect_option_3);
    lv_obj_set_pos(connect_option_3_img, 0, 0);
    lv_obj_set_size(connect_option_3_img, LV_SIZE_CONTENT, LV_SIZE_CONTENT);
    lv_img_set_src(connect_option_3_img, &nearlink);

    lv_obj_t *connect_name_obj = lv_obj_create(connect_container);
    lv_obj_set_pos(connect_name_obj, 0, 0);
    lv_obj_set_size(connect_name_obj, LV_SIZE_CONTENT, LV_SIZE_CONTENT);
    lv_obj_set_style_radius(connect_name_obj, 255, LV_PART_MAIN | LV_STATE_DEFAULT);
    lv_obj_set_style_clip_corner(connect_name_obj, true, LV_PART_MAIN | LV_STATE_DEFAULT);
    lv_obj_set_style_opa(connect_name_obj, 255, LV_PART_MAIN | LV_STATE_DEFAULT);
    lv_obj_set_style_pad_top(connect_name_obj, 2, LV_PART_MAIN | LV_STATE_DEFAULT);
    lv_obj_set_style_pad_bottom(connect_name_obj, 2, LV_PART_MAIN | LV_STATE_DEFAULT);
    lv_obj_set_style_pad_left(connect_name_obj, 12, LV_PART_MAIN | LV_STATE_DEFAULT);
    lv_obj_set_style_pad_right(connect_name_obj, 12, LV_PART_MAIN | LV_STATE_DEFAULT);
    lv_obj_set_style_text_font(connect_name_obj, &lv_font_montserrat_16, LV_PART_MAIN | LV_STATE_DEFAULT);
    lv_obj_set_style_bg_color(connect_name_obj, lv_color_hex(0xff7d2b2b), LV_PART_MAIN | LV_STATE_DEFAULT);
    lv_obj_set_style_bg_opa(connect_name_obj, 255, LV_PART_MAIN | LV_STATE_DEFAULT);

    lv_obj_t *connect_name_label = lv_label_create(connect_name_obj);
    lv_obj_set_pos(connect_name_label, 0, 0);
    lv_obj_set_size(connect_name_label, LV_SIZE_CONTENT, LV_SIZE_CONTENT);
    lv_label_set_text(connect_name_label, "CONNECT");

    // 设置 tabview 的设置 tab
    lv_obj_t *setting_tab_obj = lv_tabview_add_tab(tabview_obj, "设置");
    lv_obj_clear_flag(setting_tab_obj, LV_OBJ_FLAG_SCROLLABLE);
    lv_obj_set_style_bg_color(setting_tab_obj, lv_color_hex(0xff3d3131), LV_PART_MAIN | LV_STATE_DEFAULT);
    lv_obj_set_style_bg_opa(setting_tab_obj, 255, LV_PART_MAIN | LV_STATE_DEFAULT);

    // 连接菜单容器
    lv_obj_t *setting_container = lv_obj_create(setting_tab_obj);
    lv_obj_set_pos(setting_container, -13, -13);
    lv_obj_set_size(setting_container, 240, 240);
    lv_obj_set_style_pad_left(setting_container, 0, LV_PART_MAIN | LV_STATE_DEFAULT);
    lv_obj_set_style_pad_top(setting_container, 0, LV_PART_MAIN | LV_STATE_DEFAULT);
    lv_obj_set_style_pad_right(setting_container, 0, LV_PART_MAIN | LV_STATE_DEFAULT);
    lv_obj_set_style_pad_bottom(setting_container, 0, LV_PART_MAIN | LV_STATE_DEFAULT);
    lv_obj_set_style_bg_opa(setting_container, 0, LV_PART_MAIN | LV_STATE_DEFAULT);
    lv_obj_set_style_border_width(setting_container, 0, LV_PART_MAIN | LV_STATE_DEFAULT);
    lv_obj_set_style_radius(setting_container, 0, LV_PART_MAIN | LV_STATE_DEFAULT);
    lv_obj_clear_flag(setting_container, LV_OBJ_FLAG_SCROLLABLE);

    lv_obj_t *setting_out_panel = lv_obj_create(setting_container);
    lv_obj_set_pos(setting_out_panel, 0, 0);
    lv_obj_set_size(setting_out_panel, 480, 480);
    lv_obj_set_style_radius(setting_out_panel, 240, LV_PART_MAIN | LV_STATE_DEFAULT);
    lv_obj_set_style_clip_corner(setting_out_panel, true, LV_PART_MAIN | LV_STATE_DEFAULT);
    lv_obj_set_style_bg_color(setting_out_panel, lv_color_hex(0xff494647), LV_PART_MAIN | LV_STATE_DEFAULT);

    lv_obj_t *setting_inner_panel = lv_obj_create(setting_container);
    lv_obj_set_pos(setting_inner_panel, 121, 119);
    lv_obj_set_size(setting_inner_panel, 240, 240);
    lv_obj_set_style_radius(setting_inner_panel, 240, LV_PART_MAIN | LV_STATE_DEFAULT);
    lv_obj_set_style_clip_corner(setting_inner_panel, true, LV_PART_MAIN | LV_STATE_DEFAULT);
    lv_obj_set_style_bg_color(setting_inner_panel, lv_color_hex(0xffd3bdaf), LV_PART_MAIN | LV_STATE_DEFAULT);

    lv_obj_t *setting_inner_text = lv_label_create(setting_inner_panel);
    lv_obj_set_pos(setting_inner_text, 48, 53);
    lv_obj_set_size(setting_inner_text, LV_SIZE_CONTENT, LV_SIZE_CONTENT);
    lv_label_set_text(setting_inner_text, "时钟\n设置");
    lv_obj_set_style_text_font(setting_inner_text, &ui_font_alibaba_pu_hui_18, LV_PART_MAIN | LV_STATE_DEFAULT);

    lv_obj_t *setting_option_1 = lv_obj_create(setting_container);
    lv_obj_set_pos(setting_option_1, 164, 17);
    lv_obj_set_size(setting_option_1, 100, 100);
    lv_obj_set_style_radius(setting_option_1, 240, LV_PART_MAIN | LV_STATE_DEFAULT);
    lv_obj_set_style_clip_corner(setting_option_1, false, LV_PART_MAIN | LV_STATE_DEFAULT);
    lv_obj_set_style_bg_color(setting_option_1, lv_color_hex(0xff896334), LV_PART_MAIN | LV_STATE_DEFAULT);
    lv_obj_set_style_border_color(setting_option_1, lv_color_hex(0xff58d271), LV_PART_MAIN | LV_STATE_FOCUSED);

    lv_obj_t *setting_option_1_img = lv_img_create(setting_option_1);
    lv_obj_set_pos(setting_option_1_img, 0, 0);
    lv_obj_set_size(setting_option_1_img, LV_SIZE_CONTENT, LV_SIZE_CONTENT);
    lv_img_set_src(setting_option_1_img, &tool);

    lv_obj_t *setting_option_2 = lv_obj_create(setting_container);
    lv_obj_set_pos(setting_option_2, 14, 170);
    lv_obj_set_size(setting_option_2, 100, 100);
    lv_obj_set_style_radius(setting_option_2, 240, LV_PART_MAIN | LV_STATE_DEFAULT);
    lv_obj_set_style_clip_corner(setting_option_2, false, LV_PART_MAIN | LV_STATE_DEFAULT);
    lv_obj_set_style_bg_color(setting_option_2, lv_color_hex(0xff896334), LV_PART_MAIN | LV_STATE_DEFAULT);
    lv_obj_set_style_border_color(setting_option_2, lv_color_hex(0xff58d271), LV_PART_MAIN | LV_STATE_FOCUSED);

    lv_obj_t *setting_option_2_img = lv_img_create(setting_option_2);
    lv_obj_set_pos(setting_option_2_img, 0, 0);
    lv_obj_set_size(setting_option_2_img, LV_SIZE_CONTENT, LV_SIZE_CONTENT);
    lv_img_set_src(setting_option_2_img, &gpio);

    lv_obj_t *setting_option_3 = lv_obj_create(setting_container);
    lv_obj_set_pos(setting_option_3, 64, 70);
    lv_obj_set_size(setting_option_3, 100, 100);
    lv_obj_set_style_radius(setting_option_3, 240, LV_PART_MAIN | LV_STATE_DEFAULT);
    lv_obj_set_style_clip_corner(setting_option_3, false, LV_PART_MAIN | LV_STATE_DEFAULT);
    lv_obj_set_style_bg_color(setting_option_3, lv_color_hex(0xff896334), LV_PART_MAIN | LV_STATE_DEFAULT);
    lv_obj_set_style_bg_image_recolor(setting_option_3, lv_color_hex(0xff000000), LV_PART_MAIN | LV_STATE_DEFAULT);
    lv_obj_set_style_border_color(setting_option_3, lv_color_hex(0xff58d271), LV_PART_MAIN | LV_STATE_FOCUSED);

    lv_obj_t *setting_option_3_img = lv_img_create(setting_option_3);
    lv_obj_set_pos(setting_option_3_img, 0, 0);
    lv_obj_set_size(setting_option_3_img, LV_SIZE_CONTENT, LV_SIZE_CONTENT);
    lv_img_set_src(setting_option_3_img, &clock_);

    lv_obj_t *setting_name_obj = lv_obj_create(setting_container);
    lv_obj_set_pos(setting_name_obj, 0, 0);
    lv_obj_set_size(setting_name_obj, LV_SIZE_CONTENT, LV_SIZE_CONTENT);
    lv_obj_set_style_radius(setting_name_obj, 255, LV_PART_MAIN | LV_STATE_DEFAULT);
    lv_obj_set_style_clip_corner(setting_name_obj, true, LV_PART_MAIN | LV_STATE_DEFAULT);
    lv_obj_set_style_opa(setting_name_obj, 255, LV_PART_MAIN | LV_STATE_DEFAULT);
    lv_obj_set_style_pad_top(setting_name_obj, 2, LV_PART_MAIN | LV_STATE_DEFAULT);
    lv_obj_set_style_pad_bottom(setting_name_obj, 2, LV_PART_MAIN | LV_STATE_DEFAULT);
    lv_obj_set_style_pad_left(setting_name_obj, 12, LV_PART_MAIN | LV_STATE_DEFAULT);
    lv_obj_set_style_pad_right(setting_name_obj, 12, LV_PART_MAIN | LV_STATE_DEFAULT);
    lv_obj_set_style_text_font(setting_name_obj, &lv_font_montserrat_16, LV_PART_MAIN | LV_STATE_DEFAULT);
    lv_obj_set_style_bg_color(setting_name_obj, lv_color_hex(0xff7d2b2b), LV_PART_MAIN | LV_STATE_DEFAULT);
    lv_obj_set_style_bg_opa(setting_name_obj, 255, LV_PART_MAIN | LV_STATE_DEFAULT);

    lv_obj_t *setting_name_label = lv_label_create(setting_name_obj);
    lv_obj_set_pos(setting_name_label, 0, 0);
    lv_obj_set_size(setting_name_label, LV_SIZE_CONTENT, LV_SIZE_CONTENT);
    lv_label_set_text(setting_name_label, "SETTING");

    // 设置 tabview 的连接 tab
    lv_obj_t *about_tab_obj = lv_tabview_add_tab(tabview_obj, "关于");
    lv_obj_clear_flag(about_tab_obj, LV_OBJ_FLAG_SCROLLABLE);
    lv_obj_set_style_bg_color(about_tab_obj, lv_color_hex(0xff3d3131), LV_PART_MAIN | LV_STATE_DEFAULT);
    lv_obj_set_style_bg_opa(about_tab_obj, 255, LV_PART_MAIN | LV_STATE_DEFAULT);

    // 连接菜单容器
    lv_obj_t *about_container = lv_obj_create(about_tab_obj);
    lv_obj_set_pos(about_container, -13, -13);
    lv_obj_set_size(about_container, 240, 240);
    lv_obj_set_style_pad_left(about_container, 0, LV_PART_MAIN | LV_STATE_DEFAULT);
    lv_obj_set_style_pad_top(about_container, 0, LV_PART_MAIN | LV_STATE_DEFAULT);
    lv_obj_set_style_pad_right(about_container, 0, LV_PART_MAIN | LV_STATE_DEFAULT);
    lv_obj_set_style_pad_bottom(about_container, 0, LV_PART_MAIN | LV_STATE_DEFAULT);
    lv_obj_set_style_bg_opa(about_container, 0, LV_PART_MAIN | LV_STATE_DEFAULT);
    lv_obj_set_style_border_width(about_container, 0, LV_PART_MAIN | LV_STATE_DEFAULT);
    lv_obj_set_style_radius(about_container, 0, LV_PART_MAIN | LV_STATE_DEFAULT);
    lv_obj_clear_flag(about_container, LV_OBJ_FLAG_SCROLLABLE);

    lv_obj_t *about_out_panel = lv_obj_create(about_container);
    lv_obj_set_pos(about_out_panel, 0, 0);
    lv_obj_set_size(about_out_panel, 480, 480);
    lv_obj_set_style_radius(about_out_panel, 240, LV_PART_MAIN | LV_STATE_DEFAULT);
    lv_obj_set_style_clip_corner(about_out_panel, true, LV_PART_MAIN | LV_STATE_DEFAULT);
    lv_obj_set_style_bg_color(about_out_panel, lv_color_hex(0xff494647), LV_PART_MAIN | LV_STATE_DEFAULT);

    lv_obj_t *about_inner_panel = lv_obj_create(about_container);
    lv_obj_set_pos(about_inner_panel, 121, 119);
    lv_obj_set_size(about_inner_panel, 240, 240);
    lv_obj_set_style_radius(about_inner_panel, 240, LV_PART_MAIN | LV_STATE_DEFAULT);
    lv_obj_set_style_clip_corner(about_inner_panel, true, LV_PART_MAIN | LV_STATE_DEFAULT);
    lv_obj_set_style_bg_color(about_inner_panel, lv_color_hex(0xffd3bdaf), LV_PART_MAIN | LV_STATE_DEFAULT);

    lv_obj_t *about_inner_text = lv_label_create(about_inner_panel);
    lv_obj_set_pos(about_inner_text, 48, 53);
    lv_obj_set_size(about_inner_text, LV_SIZE_CONTENT, LV_SIZE_CONTENT);
    lv_label_set_text(about_inner_text, "关于\n我们");
    lv_obj_set_style_text_font(about_inner_text, &ui_font_alibaba_pu_hui_18, LV_PART_MAIN | LV_STATE_DEFAULT);

    lv_obj_t *about_option_1 = lv_obj_create(about_container);
    lv_obj_set_pos(about_option_1, 164, 17);
    lv_obj_set_size(about_option_1, 100, 100);
    lv_obj_set_style_radius(about_option_1, 240, LV_PART_MAIN | LV_STATE_DEFAULT);
    lv_obj_set_style_clip_corner(about_option_1, false, LV_PART_MAIN | LV_STATE_DEFAULT);
    lv_obj_set_style_bg_color(about_option_1, lv_color_hex(0xff896334), LV_PART_MAIN | LV_STATE_DEFAULT);
    lv_obj_set_style_border_color(about_option_1, lv_color_hex(0xff58d271), LV_PART_MAIN | LV_STATE_FOCUSED);

    lv_obj_t *about_option_1_img = lv_img_create(about_option_1);
    lv_obj_set_pos(about_option_1_img, 0, 0);
    lv_obj_set_size(about_option_1_img, LV_SIZE_CONTENT, LV_SIZE_CONTENT);
    lv_img_set_src(about_option_1_img, &coral);

    lv_obj_t *about_option_2 = lv_obj_create(about_container);
    lv_obj_set_pos(about_option_2, 14, 170);
    lv_obj_set_size(about_option_2, 100, 100);
    lv_obj_set_style_radius(about_option_2, 240, LV_PART_MAIN | LV_STATE_DEFAULT);
    lv_obj_set_style_clip_corner(about_option_2, false, LV_PART_MAIN | LV_STATE_DEFAULT);
    lv_obj_set_style_bg_color(about_option_2, lv_color_hex(0xff896334), LV_PART_MAIN | LV_STATE_DEFAULT);
    lv_obj_set_style_border_color(about_option_2, lv_color_hex(0xff58d271), LV_PART_MAIN | LV_STATE_FOCUSED);

    lv_obj_t *about_option_2_img = lv_img_create(about_option_2);
    lv_obj_set_pos(about_option_2_img, 0, 0);
    lv_obj_set_size(about_option_2_img, LV_SIZE_CONTENT, LV_SIZE_CONTENT);
    lv_img_set_src(about_option_2_img, &git);

    lv_obj_t *about_option_3 = lv_obj_create(about_container);
    lv_obj_set_pos(about_option_3, 64, 70);
    lv_obj_set_size(about_option_3, 100, 100);
    lv_obj_set_style_radius(about_option_3, 240, LV_PART_MAIN | LV_STATE_DEFAULT);
    lv_obj_set_style_clip_corner(about_option_3, false, LV_PART_MAIN | LV_STATE_DEFAULT);
    lv_obj_set_style_bg_color(about_option_3, lv_color_hex(0xff896334), LV_PART_MAIN | LV_STATE_DEFAULT);
    lv_obj_set_style_bg_image_recolor(about_option_3, lv_color_hex(0xff000000), LV_PART_MAIN | LV_STATE_DEFAULT);
    lv_obj_set_style_border_color(about_option_3, lv_color_hex(0xff58d271), LV_PART_MAIN | LV_STATE_FOCUSED);

    lv_obj_t *about_option_3_img = lv_img_create(about_option_3);
    lv_obj_set_pos(about_option_3_img, 0, 0);
    lv_obj_set_size(about_option_3_img, LV_SIZE_CONTENT, LV_SIZE_CONTENT);
    lv_img_set_src(about_option_3_img, &author);

    lv_obj_t *about_name_obj = lv_obj_create(about_container);
    lv_obj_set_pos(about_name_obj, 0, 0);
    lv_obj_set_size(about_name_obj, LV_SIZE_CONTENT, LV_SIZE_CONTENT);
    lv_obj_set_style_radius(about_name_obj, 255, LV_PART_MAIN | LV_STATE_DEFAULT);
    lv_obj_set_style_clip_corner(about_name_obj, true, LV_PART_MAIN | LV_STATE_DEFAULT);
    lv_obj_set_style_opa(about_name_obj, 255, LV_PART_MAIN | LV_STATE_DEFAULT);
    lv_obj_set_style_pad_top(about_name_obj, 2, LV_PART_MAIN | LV_STATE_DEFAULT);
    lv_obj_set_style_pad_bottom(about_name_obj, 2, LV_PART_MAIN | LV_STATE_DEFAULT);
    lv_obj_set_style_pad_left(about_name_obj, 12, LV_PART_MAIN | LV_STATE_DEFAULT);
    lv_obj_set_style_pad_right(about_name_obj, 12, LV_PART_MAIN | LV_STATE_DEFAULT);
    lv_obj_set_style_text_font(about_name_obj, &lv_font_montserrat_16, LV_PART_MAIN | LV_STATE_DEFAULT);
    lv_obj_set_style_bg_color(about_name_obj, lv_color_hex(0xff7d2b2b), LV_PART_MAIN | LV_STATE_DEFAULT);
    lv_obj_set_style_bg_opa(about_name_obj, 255, LV_PART_MAIN | LV_STATE_DEFAULT);

    lv_obj_t *about_name_label = lv_label_create(about_name_obj);
    lv_obj_set_pos(about_name_label, 0, 0);
    lv_obj_set_size(about_name_label, LV_SIZE_CONTENT, LV_SIZE_CONTENT);
    lv_label_set_text(about_name_label, "ABOUT");
}

